{% load static %}
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{% static 'bootstrap-5.1.3/css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'bootstrap-5.1.3/css/bootstrap.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
</head>
<body>
{% include 'global_header.html' with is_login=is_login %}
<div class="panel panel-default p-1">
    {% block mainpage %}
    <div class="row">
        <div class="col-lg-8">

            <div id="demo" class="carousel slide" data-bs-ride="carousel">

                <!-- Indicators/dots -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
                </div>

                <!-- The slideshow/carousel -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="d-block"
                             style="width:100%">
                        <div class="carousel-caption">
                            <h3>第一张图片描述标题</h3>
                            <p>第一张图片描述内容显示在这里！！！</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" class="d-block"
                             style="width:100%">
                        <div class="carousel-caption">
                            <h3>第二张图片描述标题</h3>
                            <p>第二张图片描述内容显示在这里！！！</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" class="d-block"
                             style="width:100%">
                        <div class="carousel-caption">
                            <h3>第三张图片描述标题</h3>
                            <p>第三张图片描述内容显示在这里！！！</p>
                        </div>
                    </div>
                </div>

                <!-- Left and right controls/icons -->
                <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="p-2 rounded" style="height: 100%;background: #66CCFF">
                <h3 class="text-center">公告</h3>
                <div class="list-group ">
                    <a href="#" class="list-group-item list-group-item-action">公告1</a>
                    <a href="#" class="list-group-item list-group-item-action">公告2</a>
                    <a href="#" class="list-group-item list-group-item-action">公告3</a>
                    <a href="#" class="list-group-item list-group-item-action">公告4</a>
                    <a href="#" class="list-group-item list-group-item-action">公告5</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
    </div>
</div>
{% endblock mainpage %}
<script src="{% static 'bootstrap-5.1.3/js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>